<template>
  <div class="list-box mt10">
    <Form ref="formInline" inline :label-width="86">
      <FormItem label="消息状态：">
        <Select
          style="width: 140px"
          v-model="condition.isRead"
          clearable
          placeholder="请选择消息状态"
          @on-change="getList(1)"
        >
          <Option
            v-for="item in messageStatus"
            :value="item.code"
            :key="item.value"
            >{{ item.name }}</Option
          >
        </Select>
      </FormItem>
      <FormItem label="消息类型：">
        <Select
          style="width: 140px"
          v-model="condition.noticeAction"
          :max-tag-count="1"
          clearable
          placeholder="请选择消息类型"
          @on-change="getList(1)"
        >
          <Option
            v-for="item in messageType"
            :value="item.code"
            :key="item.id"
            @on-change="getList(1)"
            >{{ item.name }}</Option
          >
        </Select>
      </FormItem>
      <FormItem label="时间：" :label-width="65">
        <DatePicker
          type="daterange"
          placeholder="请选择时间"
          v-model="createdDate"
          @on-change="getList(1)"
        ></DatePicker>
      </FormItem>
      <Button @click="setMessageReadAll">全部标记已读</Button>
    </Form>
    <Table
      @on-selection-change="selectList"
      border
      ref="selection"
      :columns="columns2"
      :data="data1"
    >
      <template slot-scope="{ row }" slot="isRead">
        <span v-if="row.isRead == 1">已读</span>
        <span v-else>未读</span>
      </template>
      <template slot-scope="{ row }" slot="handledStatus">
        <span
          @click="confirm(row)"
          v-if="row.handledStatus == '00'"
          class="red-color"
          :class="row.targetType == 2 ? 'fault' : ''"
        >
          <span> 未处理 </span>
        </span>
        <span v-else-if="11">已处理</span>
        <span v-else>-</span>
      </template>

      <template slot-scope="{ row }" slot="action">
        <a href="#" @click="lookDetail(row)">详情</a>
      </template>
    </Table>
    <div class="disflex mt30">
      <Page
        :page-size="condition.page_size"
        :total="total"
        show-elevator
        :current="condition.page"
        @on-change="changepage"
      ></Page>
    </div>
  </div>
</template>
<script>
import {
  messageList,
  messageTriggerType,
  messageRead,
  handleNotice,
} from "@/api/message";
import moment from "moment";
export default {
  data() {
    return {
      total: 0, //总条数
      page: {
        limit: 1,
        page: 1,
      },
      createdDate: [],
      noticeId: [],
      selectlist: [],
      messageType: [],
      messageNotice: [],
      condition: {
        //头部筛选传参
        page: 1,
        page_size: 10,
        noticeAction: "",
        isRead: "",
      },
      messageStatus: [
        { value: 0, name: "全部", code: "" },
        { value: 0, name: "未读", code: "NO" },
        { value: 1, name: "已读", code: "YES" },
      ],
      columns2: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "消息类型",
          width: 100,
          key: "noticeActionName",
        },
        {
          title: "状态",
          width: 70,
          slot: "isRead",
        },
        {
          title: "所属护栏",
          key: "railName",
          width: 160,
          tooltip:true,
        },
        {
          title: "设备编码",
          key: "deviceCode",
          width: 150,
          tooltip:true,
        },
        {
          title: "当前位置",
          key: "deviceAddress",
          tooltip:true,
        },
        {
          title: "上报时间",
          key: "createdAt",
          width: 120,
        },
        {
          title: "消息内容",
          width: 180,
          key: "content",
          tooltip:true,
        },
        {
          title: "查看",
          width: 70,
          slot: "action",
        },
        {
          title: "操作",
          width: 80,
          slot: "handledStatus",
        },
      ],
      data1: [],
    };
  },
  created() {
    this.getList();
    this.getType();
  },
  methods: {
    setMessageReadAll() {
      if (this.noticeId.length == 0) {
        this.$Message.warning("请选择消息！");
      } else {
        this.setMessageRead();
      }
    },
    async setMessageRead() {
      let res = await messageRead({
        noticeId: this.noticeId.join(),
      });
      if (res.code == 0) {
        // this.$Message.success('操作成功！');
        await this.getList(0);
        this.$store.commit("admin/message/changeData", {
          name: "messageNoRead",
          value: new Date().getTime(),
        });
      } else {
        this.$Message.error("操作失败！");
      }
    },
    selectList(value) {
      this.noticeId = value.map((item) => item.id);
    },
    searchPaper(result) {
      console.log(result);
    },
    //获取列表
    getList(event, type) {
      let that = this;

      if (type != "page") {
        this.condition.page = 1;
      }
      let data = {
        //头部筛选传参
        start: that.condition.page,
        limit: that.condition.page_size,
        isRead: that.condition.isRead,
        noticeAction: that.condition.noticeAction,
        createdStartDate: that.createdDate[0]
          ? moment(that.createdDate[0]).format("YYYY-MM-DD")
          : "",
        createdEndDate: that.createdDate[1]
          ? moment(that.createdDate[1]).format("YYYY-MM-DD")
          : "",
      };
      messageList(data).then((res) => {
        that.data1 = _.get(res, "data.records") || [];
        that.total = _.get(res, "data.total") || 0;
      });
    },
    async getType() {
      let res = await messageTriggerType();
      this.messageType = res.data;
    },
    //分页
    changepage(page) {
      console.log(page);
      this.condition.page = page;
      this.getList("", "page");
    },
    confirm(row) {
      //if (row.targetType !== 2) return;
      this.$Modal.confirm({
        title: "提示",
        content: "<p>确认处理吗？</p>",
        onOk: async () => {
          let res = await handleNotice({
            noticeId: row.id,
          });
          if (res.code == 0) {
            this.$Message.success("消息处理成功！");
            await this.getList(0);
            this.$store.commit("admin/message/changeData", {
              name: "messageNoRead",
              value: new Date().getTime(),
            });
          } else {
            this.$Message.error("消息处理失败！");
          }
        },
        onCancel: () => {
          // this.$Message.info('Clicked cancel');
        },
      });
    },
    //查看详情
    async lookDetail(row) {
      this.noticeId = [row.id];
      await this.setMessageRead();
      if (row.targetType == 2) {
        this.$router.push({
          name: "message-messageDetail",
          query: {
            id: row.targetId,
          },
        });
        if (this.$route.path == "/message/messageDetail") {
          window.location.reload();
        }
      } else if (row.targetType == 3) {
        this.$router.push({
          name: "device-index",
          query: {
            name: "deviceAlarmList",
            // deviceStatus:'ABNORMAL',
          },
        });
        if (this.$route.path == "/device/index") {
          window.location.reload();
        }
      }
    },
    cancel() {},
  },
};
</script>
<style lang="less" scoped>
.red-color {
  color: red;
  cursor: pointer;
}
.fault {
  cursor: pointer;
  text-decoration: underline;
}
.uplooad-fault {
  text-decoration: underline;
}
</style>
